<template>
    <div class="area-select">
        <el-cascader
            ref="cascaderRef"
            :options="options"
            v-model="areaValue"
            @change="getSelectValue"
        ></el-cascader>
    </div>
</template>

<script setup lang="ts">
import area from '@/utils/area'
import type { CascaderOption } from 'element-plus'

const options: Array<CascaderOption> = area // 地区列表

const cascaderRef = ref()
const props = defineProps({
    province_id: {
        type: Number
    },
    city_id: {
        type: Number
    },
    district_id: {
        type: Number
    },
    province: {
        type: String
    },
    city: {
        type: String
    },
    district: {
        type: String
    }
})

const emit = defineEmits([
    'update:province_id',
    'update:city_id',
    'update:district_id',
    'update:province',
    'update:city',
    'update:district'
])

const areaValue: any = computed({
    get() {
        return [Number(props.province_id), Number(props.city_id), Number(props.district_id)]
    },
    set(value) {
        emit('update:province_id', value[0])
        emit('update:city_id', value[1])
        emit('update:district_id', value[2])
    }
})

const selectValue: any = computed({
    get() {
        return [props.province, props.city, props.district]
    },
    set(value) {
        emit('update:province', value[0])
        emit('update:city', value[1])
        emit('update:district', value[2])
    }
})

const getSelectValue = () => {
    const node = cascaderRef.value.getCheckedNodes()
    selectValue.value = node[0].pathLabels
}
</script>
